<template>
    <div class="app-container">
        <el-button @click="addClick" type="primary" size="small">添加</el-button>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="developmentTime" label="日期"></el-table-column>
            <el-table-column prop="title" label="主题"></el-table-column>
            <el-table-column prop="information" label="简介"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column prop="updateTime" label="更新时间"></el-table-column>
            <el-table-column label="操作" width="160" fixed="right">
                <template slot-scope="scope">
                    <el-button @click.stop="editClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click.stop="statusClick(scope.row)" type="text" size="small">{{(scope.row.usingStatus == 1) ? '禁用' : '启用'}}</el-button>
                    <el-button @click.stop="delClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="getList" layout="total, prev, pager, next, jumper" :total="pageData.totalElements"></el-pagination>
        <!-- 弹框 -->
        <el-dialog :visible.sync="showDialog" width="800px">
            <el-form ref="dataForm" :rules="rules" :model="dataForm" label-position="left" label-width="100px" style="margin: 0px 50px;">
                <el-form-item label="发展日期：" prop="developmentTime">
                    <el-date-picker v-model="dataForm.developmentTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="主题：" prop="title">
                    <el-input v-model="dataForm.title"></el-input>
                </el-form-item>
                <el-form-item label="简介：" prop="information">
                    <el-input type="textarea" v-model="dataForm.information"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="addSubmit('dataForm')" type="primary">保存</el-button>
                    <el-button @click="cancelClick('dataForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
// import { creatRecord, findRecord, updateRecord, releaseRecord, delRecord } from '@/api/development'
import { getCookie, setCookie } from '@/utils/auth'
export default {
    name: 'Finance',
    data() {
        return{
            tableData: [],
            nowTit: '',
            nowId: '',
            showDialog: false,
            dataForm: {
                developmentTime: '',
                information: '',
                title: ''
            },
            rules: {
                title: [
                    { required: true, message: '请输入主题', trigger: 'blur' }
                ],
                information: [
                    { required: true, message: '请输入简介', trigger: 'blur' }
                ],
                developmentTime: [
                    { required: true, message: '请选择发展日期', trigger: 'change' }
                ],
            },
            nowPage: 0,
            pageSize: 10,
            imageUrl: '',
            formData: {},
            popStatus: 0,  //0为添加，1为修改
            pageData: {},
        }
    },
    methods: {
        //默认函数
        init(){
            let _this = this;
            //获取列表信息
            // findRecord({ page: this.nowPage, size: this.pageSize }).then(response => {
            //     if(response.code == 200){
            //         _this.pageData = response.object;
            //         _this.tableData = response.object.content;
            //     }else{
            //         this.$message.error(response.message);
            //     }
            // })
        },
        //添加
        addClick(){
            this.popStatus = 0;
            this.showDialog = true;
            this.dataForm.title = '';
            this.dataForm.information = '';
            this.dataForm.developmentTime = '';
            if(this.dataForm.id){
                delete this.dataForm.id;
            }
        },
        //提交添加
        addSubmit(formName){
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //提交
                    if(_this.popStatus == 0){  //添加

                        creatRecord(_this.dataForm).then(response => {
                            if(response.code == 200){
                                this.$message.success(response.message);
                                _this.init();
                                _this.showDialog = false;
                            }else{
                                this.$message.error(response.message);
                            }
                        })

                    }else if(_this.popStatus == 1){  //修改
                        _this.dataForm.id = _this.nowId;
                        updateRecord(_this.dataForm).then(response => {
                            if(response.code == 200){
                                this.$message.success(response.message);
                                _this.init();
                                _this.showDialog = false;
                            }else{
                                this.$message.error(response.message);
                            }
                        })
                    }
                    
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //删
        delClick(row){
            let _this = this;
            this.$confirm('确定删除 '+row.title+' 吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //删除
                delRecord({id:row.id}).then(response => {
                    if(response.code == 200){
                        this.$message.success(response.message);
                        _this.init();
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //编辑
        editClick(row){
            this.popStatus = 1;
            this.nowId = row.id;
            this.dataForm.developmentTime = row.developmentTime;
            this.dataForm.information = row.information;
            this.dataForm.title = row.title;
            this.showDialog = true;
        },
        //取消
        cancelClick(formName){
            this.showDialog = false;
            this.$refs[formName].resetFields();
        },
        //启用禁用
        statusClick(row){
            let usingStatus,isUsing;
            if(row.usingStatus == 1){  //启用状态
                usingStatus = 0;
                isUsing = '禁用';
            }else{
                usingStatus = 1;
                isUsing = '启用';
            }

            let _this = this;
            this.$confirm('确定修改状态为 '+ isUsing +' 吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //启用禁用
                releaseRecord(row.id, getCookie('pid'), usingStatus ).then(response => {
                    if(response.code == 200){
                        this.$message.success(response.message);
                        _this.init();
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //分页
        getList(val) {
            this.nowPage = val - 1;
            this.init();
        },
    },
    mounted(){
        this.init()
    }
}
</script>